/* eslint-disable */
const {resolve} = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require("html-webpack-plugin");
const EslintPlugin = require("eslint-webpack-plugin")

// 获取环境变量
const NODE_ENV = process.env.NODE_ENV
const isProduction = NODE_ENV === 'production'

module.exports = {
    mode: 'development',
    devtool: false,
    entry: './src/index.ts',
    // entry: {
    //     entry1: './src/entry1.js',
    //     entry2: './src/entry2.js'
    // },
    output: {
        path: resolve(__dirname, 'dist'),
        filename: "[name].js",
        clean: true
    },
    devServer: {
        host: 'localhost', // 主机名
        port: 9000, // 端口
        open: true, // 构建结束自动打开浏览器预览项目
        compress: true, // 启用 gzip 压缩
        hot: true, // 启用支持模块热替换
        watchFiles: [ // 监听哪些文件变化，如果文件变化了可重新编译
            "src/**/*.js"
        ], // 不配置监听所有文件
        historyApiFallback: true, // 不管访问哪个路径， 都会把页面重定向到 index.html， 交给前端路由来处理
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    // 'ts-loader',
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                '@babel/preset-typescript'
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                "@babel/preset-env"
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.css$/, // 匹配的条件，一般是一个正则，用来匹配文件的路径
                // 从右到左
                use: [
                    // 通过 style 标签动态插入样式到HTML里
                    isProduction?MiniCssExtractPlugin.loader:'style-loader',
                    // 作用是把CSS代码转换为JS代码 module.export = `body:{}`
                    'css-loader',
                    'postcss-loader',
                ] // use 指定的转换方式

            },
            {
                test: /\.less$/,
                use: [
                    isProduction?MiniCssExtractPlugin.loader:'style-loader',
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new MiniCssExtractPlugin(), // 生成独立的css文件， 从js抽出来
        new EslintPlugin({
            extensions: ['js', 'jsx', 'ts', 'tsx'], // 指定检查的文件类型
        })
    ]
}
/* eslint-enable */
/**
 * MiniCssExtractPlugin 的好处
 * 1. 把 css 文件提取到单独的文件中
 * 2. 减少 main.js 文件体积
 * 3. 可以让 css 和 js 并行加载，提高加载效率，减少加载时间
 * 4. 可以单独维护 css， 更清晰
 *
 *
 * 打包环境分为两种：开发和生成
 * 开发：快
 * 生产：慢
 *
 *
 * cross-env NODE_ENV=production
 * 通过cross-env 可以跨平台设置环境变量
 */
